<template>
  <div class="page">
    <!-- <swiper :list="demo01_list" v-model="demo01_index" @on-index-change="demo01_onIndexChange"></swiper> -->
    <div class="swiper-box">
      <swiper id="homeswiper" :aspect-ratio="400/800">
        <swiper-item class="swiper-demo-img" v-for="(item, index) in demo04_list" :key="index"><img :src="item"></swiper-item>
      </swiper>
    </div>
    <div class="container">
      <div class="house-title-containe layout">
        <div class="house-title">
          西单王府井 对面即是宣武医院菜市口地铁大一居
        </div>
        <div class="mark">
          <p>环境优美</p>
          <p>采光充足</p>
          <p>舒适娴雅</p>
          <p>通风良好</p>
        </div>
        <div class="house-price">
          ¥<span class="money">427</span>
          <span class="house-class">起/晚</span>
        </div>
      </div>
      <div class="house-info layout">
        <div class="title-line">
          民宿介绍
        </div>
        <p class="house-dec-txt">房间设计主题为法式乡村，为提升房间设计的整体感家具基本采用自制。打磨后的老床头散发着岁月洗礼后的温和，流露出天然本真的自然颜色。软硬适中的床垫加上有质感的纯亚麻床品，让您的睡眠被感舒适。书柜里有不少杂志，闲暇时间可以宅在房间慢慢品味。小区地理位置优越，步行十分钟左右可至地址14号线将台站，紧临恒通商务圈及798，周边集餐饮、购物、休闲、娱乐为一体。温馨提示：请您审慎选择，不确定自己是否喜欢房间风格请不要勉强尝试，不要辜负彼此的好意！</p>
      </div>
      <div class="house-info layout">
        <div class="title-line">
          选择日期
        </div>
        <p class="house-dec-txt">房间设计主题为法式乡村，为提升房间设计的整体感家具基本采用自制。打磨后的老床头散发着岁月洗礼后的温和，流露出天然本真的自然颜色。软硬适中的床垫加上有质感的纯亚麻床品，让您的睡眠被感舒适。书柜里有不少杂志，闲暇时间可以宅在房间慢慢品味。小区地理位置优越，步行十分钟左右可至地址14号线将台站，紧临恒通商务圈及798，周边集餐饮、购物、休闲、娱乐为一体。温馨提示：请您审慎选择，不确定自己是否喜欢房间风格请不要勉强尝试，不要辜负彼此的好意！</p>
      </div>
      <div class="house-info layout">
        <div class="title-line">
          设施
        </div>
        <p class="house-dec-txt">房间设计主题为法式乡村，为提升房间设计的整体感家具基本采用自制。打磨后的老床头散发着岁月洗礼后的温和，流露出天然本真的自然颜色。软硬适中的床垫加上有质感的纯亚麻床品，让您的睡眠被感舒适。书柜里有不少杂志，闲暇时间可以宅在房间慢慢品味。小区地理位置优越，步行十分钟左右可至地址14号线将台站，紧临恒通商务圈及798，周边集餐饮、购物、休闲、娱乐为一体。温馨提示：请您审慎选择，不确定自己是否喜欢房间风格请不要勉强尝试，不要辜负彼此的好意！</p>
      </div>
      <div class="house-info layout">
        <div class="title-line">
          入住须知
        </div>
        <p class="house-dec-txt">房间设计主题为法式乡村，为提升房间设计的整体感家具基本采用自制。打磨后的老床头散发着岁月洗礼后的温和，流露出天然本真的自然颜色。软硬适中的床垫加上有质感的纯亚麻床品，让您的睡眠被感舒适。书柜里有不少杂志，闲暇时间可以宅在房间慢慢品味。小区地理位置优越，步行十分钟左右可至地址14号线将台站，紧临恒通商务圈及798，周边集餐饮、购物、休闲、娱乐为一体。温馨提示：请您审慎选择，不确定自己是否喜欢房间风格请不要勉强尝试，不要辜负彼此的好意！</p>
      </div>
      

      
    </div>
  </div>
</template>

<script>
import { Swiper, GroupTitle, SwiperItem, XButton, Divider } from "vux";

const baseList = [
  {
    url: "javascript:",
    img: require("./1.jpg")
  },
  {
    url: "javascript:",
    img: require("./2.jpg")
  },
  {
    url: "javascript:",
    img: require("./3.jpg"),
    fallbackImg: "https://static.vux.li/demo/3.jpg"
  }
];

const imgList = [
  "http://placeholder.qiniudn.com/800x600/FF3B3B/ffffff",
  "http://placeholder.qiniudn.com/800x600/FFEF7D/ffffff",
  "http://placeholder.qiniudn.com/800x600/8AEEB1/ffffff"
];

const urlList = baseList.map((item, index) => ({
  url: "http://m.baidu.com",
  img: item.img,
  fallbackImg: item.fallbackImg,
  title: `(可点击)${item.title}`
}));

const demoList = imgList.map((one, index) => ({
  url: "javascript:",
  img: one
}));

const only2ClickList = baseList.slice(0, 2).map(item => {
  item.url = "http://m.baidu.com";
  return item;
});

export default {
  components: {
    Swiper,
    SwiperItem,
    GroupTitle,
    XButton,
    Divider
  },
  ready() {},
  methods: {
    getlongLease(n) {
      // !!n ? this.longLease = true : longLease = false
      alert(n);
    },
    onSwiperItemIndexChange(index) {
      console.log("demo item change", index);
    },
    demo01_onIndexChange(index) {
      this.demo01_index = index;
    },
    demo05_onIndexChange(index) {
      this.demo05_index = index;
    },
    demo05_onLoad(id) {
      this.demo05_list = id === 1 ? baseList : demoList;
    },
    demo06_onIndexChange(index) {
      this.demo06_index = index;
    },
    demo07_onIndexChange(index) {
      this.demo07_index = index;
    }
  },
  data() {
    return {
      longLease: true,
      demo01_list: baseList,
      demo02_list: demoList,
      demo03_list: demoList,
      demo04_list: imgList,
      demo05_list: [],
      demo06_list: urlList,
      demo07_list: only2ClickList,
      demo01_index: 0,
      demo02_index: 1,
      demo05_index: 0,
      demo06_index: 0,
      demo07_index: 0,
      swiperItemIndex: 1
    };
  }
};
</script>

<style lang="scss" scoped>
.page {
  background: #f0f3f5;
}
#homeswiper .vux-indicator-right {
  top: 60px;
}
.container {
  .layout {
    background: #fff;
    border-bottom: 1px solid #e2e2e2;
    + .layout {
      margin-top: 0.8rem;
    }
  }
  .house-title-containe {
    padding: 12px;
    .house-title {
      font-size: 1.2rem;
      font-weight: bold;
      line-height: 1.5;
    }
    .mark {
      margin-top: 20px;
      p {
        border: 1px solid #1a96d5;
        color: #1a96d5;
        padding: 0 6px;
        border-radius: 4px;
        font-size: 0.75rem;
        height: 20px;
        line-height: 20px;
        display: inline-block;
      }
      p + p {
        margin-left: 0.8rem;
      }
    }
    .house-price {
      color: #e94e4a;
      font-size: 0.2rem;
      .money {
        font-size: 1.6rem;
        font-weight: 700;
        padding: 0 0 0 4px;
        vertical-align: 0;
      }
      .house-class {
        color: #ccc;
      }
    }
  }
  .house-info {
    padding: 0 12px;
    .title-line {
      border-bottom: 1px solid #eeeeee;
      height: 44px;
      line-height: 44px;
      font-size: 1.2rem;
      margin: 0 0 10px 0;
      position: relative;
      &:after {
        content: " ";
        display: inline-block;
        height: 6px;
        width: 6px;
        border-width: 2px 2px 0 0;
        border-color: #c8c8cd;
        border-style: solid;
        -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
        transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
        position: relative;
        top: -2px;
        position: absolute;
        top: 50%;
        margin-top: -4px;
        right: 17px;
      }
    }
    .house-dec-txt {
      font-size: 14px;
      color: #353535;
      overflow: hidden;
      position: relative;
      height: 65px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      margin: 0 0 10px 0;
    }
  }
}
</style>